<template>
  <div class="custom-slider-container">
    <!-- 轨道 -->
    <div
        ref="track"
        class="slider-track"
        @click="handleTrackClick"
    >
      <!-- 左侧负值进度条 -->
<!--      <div-->
<!--          v-if="modelValue < 0"-->
<!--          class="slider-progress-negative"-->
<!--          :style="{ width: percentageLeft + '%' }"-->
<!--      ></div>-->

<!--      &lt;!&ndash; 右侧正值进度条 &ndash;&gt;-->
<!--      <div-->
<!--          v-if="modelValue > 0"-->
<!--          class="slider-progress-positive"-->
<!--          :style="{ width: percentageRight + '%' }"-->
<!--      ></div>-->

      <!-- 滑块 -->
      <div
          ref="thumb"
          class="slider-thumb"
          :style="{ left: percentage + '%' }"
          @mousedown="startDragging"
          @touchstart="startDragging"
          role="slider"
          :aria-valuemin="min"
          :aria-valuemax="max"
          :aria-valuenow="modelValue"
          tabindex="0"
          @keydown.left="adjustValue(-step)"
          @keydown.right="adjustValue(step)"
      >
        <div class="slider-tooltip">{{ modelValue }}</div>
      </div>
    </div>

    <!-- 刻度标记 -->
    <div v-if="marks.length" class="slider-marks">
      <div
          v-for="mark in marks"
          :key="mark.value"
          class="slider-mark"
          :style="{ left: calculateMarkPosition(mark.value) + '%' }"
      >
        <div class="slider-mark-text">{{ mark.label }}</div>
        <div class="slider-mark-line"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 定义 props
const props = defineProps({
  modelValue: {
    type: Number,
    required: true
  },
  min: {
    type: Number,
    default: -100
  },
  max: {
    type: Number,
    default: 100
  },
  step: {
    type: Number,
    default: 1
  },
  marks: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue'])

// ✅ 正确声明 ref
const track = ref(null)
const thumb = ref(null)


// 响应式数据
const dragging = ref(false)
const trackWidth = ref(0)

// 计算当前值的百分比位置（以零点为中心）
const percentage = computed(() => {
  const range = props.max - props.min
  const offset = props.modelValue - props.min
  return (offset / range) * 100
})

// 左侧负值进度条长度
const percentageLeft = computed(() => {
  const range = props.max - props.min
  const offset = Math.abs(props.modelValue - props.min)
  return (offset / range) * 100
})

// 右侧正值进度条长度
const percentageRight = computed(() => {
  const range = props.max - props.min
  const offset = props.modelValue - props.min
  return ((offset / range))/2 * 100
})

// 点击轨道更新值
const handleTrackClick = (e) => {
  if (!dragging.value) {
    const rect = track.value.getBoundingClientRect()
    const clickX = e.clientX - rect.left
    const percentage = (clickX / rect.width) * 100
    const newValue = props.min + (percentage / 100) * (props.max - props.min)
    emit('update:modelValue', Math.round(newValue / props.step) * props.step)
  }
}

// 开始拖拽
const startDragging = (e) => {
  dragging.value = true
  document.addEventListener('mousemove', handleDragging)
  document.addEventListener('mouseup', stopDragging)
  document.addEventListener('touchmove', handleDragging)
  document.addEventListener('touchend', stopDragging)
}

// 拖拽中
const handleDragging = (e) => {
  if (dragging.value) {
    const rect = track.value.getBoundingClientRect()
    const x = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
    const clickX = x - rect.left
    const percentage = Math.max(0, Math.min(100, (clickX / rect.width) * 100))
    const newValue = props.min + (percentage / 100) * (props.max - props.min)
    emit('update:modelValue', Math.round(newValue / props.step) * props.step)
  }
}

// 停止拖拽
const stopDragging = () => {
  dragging.value = false
  document.removeEventListener('mousemove', handleDragging)
  document.removeEventListener('mouseup', stopDragging)
  document.removeEventListener('touchmove', handleDragging)
  document.removeEventListener('touchend', stopDragging)
}

// 键盘控制
const adjustValue = (delta) => {
  const newValue = props.modelValue + delta
  emit('update:modelValue', Math.max(props.min, Math.min(props.max, newValue)))
}

// 计算刻度位置
const calculateMarkPosition = (value) => {
  const range = props.max - props.min
  const offset = value - props.min
  return (offset / range) * 100
}

// 初始化轨道宽度
onMounted(() => {
  trackWidth.value = track.value.offsetWidth
})
</script>

<style scoped>
.custom-slider-container {
  position: relative;
  width: 100%;
  height: 24px;

}

.slider-track {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: #6396ff;
  border-radius: 4px;
  cursor: pointer;

}

.slider-progress-negative {
  position: absolute;
  left: 0;
  height: 100%;
  background-color: #3e97ff;
}

.slider-progress-positive {
  position: absolute;
  right: 0;
  height: 100%;
  background-color: #3e97ff;
}

.slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #fff;
  border: 2px solid #409EFF;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  cursor: grab;
  transition: all 0.2s ease;
}

.slider-thumb:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.slider-tooltip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background-color: #409EFF;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.slider-thumb:hover .slider-tooltip {
  opacity: 1;
}

.slider-marks {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0px 10px 0px 10px;
  height: 30px;
}

.slider-mark {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slider-mark-line {
  width: 2px;
  height: 8px;
  background-color: #ccc;
}

.slider-mark-text {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}
</style>